<template>
  <BasicTabs v-model="tabname" :tabs="tabs" @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import SliverTab from './components/sliverTab.vue'
  import SpunyarnTab from './components/spunyarnTab.vue'
  import RovingTab from './components/rovingTab.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: 'raw',
      label: '生条',
      slots: { default: h(SliverTab, { type: 'raw' }) }
    },
    {
      name: 'drawn',
      label: '熟条',
      slots: { default: h(SliverTab, { type: 'drawn' }) }
    },
    {
      name: 'roving',
      label: '粗纱',
      isFit: true,
      slots: { default: h(RovingTab) }
    },
    {
      name: 'spunyarn',
      label: '细纱',
      isFit: true,
      slots: { default: h(SpunyarnTab) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
